<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class</title>
</head>

<body>
    <h1>Class</h1>

    <input type="text" placeholder="请输入废话" />
    <button type="button" class="button_1st">一级废话</button>
    <button type="button" class="button_2nd">二级废话</button>
    <p></p>


    <script>
        const input = document.querySelector('input'),
            button_1st = document.querySelector('.button_1st'),
            button_2nd = document.querySelector('.button_2nd'),
            p = document.querySelector('p')

        // 封装一个属性和方法可以称为类，主要目是整合
        class Bullshit {
            // 每次实例化 new 的时候就会触发这个 constructor，也是构造函数本身
            // 定义参数，参数由 new 实例化的时候传入
            constructor(text, color) {
                this.text = text
                this.color = color
            }

            // 静态方法，静态方法是用类本身去调用，而不是实例
            static welcome_tips() {
                return '温馨提示：您这是在讲废话'
            }

            static welcome() {
                p.innerHTML = this.welcome_tips();
            }

            show() {
                p.innerHTML = this.text + input.value;
                p.style.color = this.color
            }

            // 设置属性
            set extra(value) {
                this.value = value
                p.innerHTML += this.value
            }

            // 获取属性
            get extra() {
                return `这些都是废话：${this.text}  ${this.value}`
            }

        }

        // 定义一个子类继承
        class Son_of_bullshit extends Bullshit {
            constructor(text, color, fontSize) {
                super(text, color)  // super 方法继承了父级的属性，子类继承一定要写 super
                this.fontSize = fontSize    // 定义自己的属性
            }

            // 改写父类方法，如果不改写，则会父级寻找
            show() {
                p.innerHTML = this.text + input.value;
                p.style.color = this.color
                p.style.fontSize = this.fontSize
            }
        }

        button_1st.addEventListener('click', () => {
            const bullshit = new Bullshit('我知道', '#00a1d6');
            bullshit.show()
            bullshit.extra = '一级'
            console.log(bullshit.extra);
        })

        button_2nd.addEventListener('click', () => {
            const son_of_bullshit = new Son_of_bullshit('你知道', 'red', '30px');
            son_of_bullshit.show()
            son_of_bullshit.extra = '二级'
            console.log(son_of_bullshit.extra);

            console.log(Son_of_bullshit.welcome_tips());
        })

        p.addEventListener('click', () => {
            const a = Bullshit.welcome_tips()
            console.log(a);
            Bullshit.welcome()
        })
    </script>
</body>

</html>